<template>
  <div>
    <a-modal :width='width+40' v-model:open="open" title="图片详情" @ok="handleOk">
      <img :src="url" :style="{'width':width+'px'}" />
      <template #footer>
        <a-button @click="big">
          放大
        </a-button>
        <a-button @click="small">缩小</a-button>
        <a-button @click="handleCancel">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        open: false,
        url: '',
        width: 600
      }
    },
    methods: {
      big() {
        if (this.width < 1000) {
          this.width += 50
        }
      },
      small() {
        if (this.width > 600) {
          this.width -= 50
        }
      },
      initData(img) {
        this.open = true
        this.url = img
      },
      handleOk() {
        this.open = false
        this.width = 600
      },
      handleCancel() {
        this.open = false
        this.width = 600
      }
    }
  }
</script>

<style>
</style>